<template>
    <div @click="handleToStore" :class="['store-good-item-wrap', isDel ? 'del' : '']">

        <img v-if="isDel" @click.stop="handleToItem" class="circle-icon"
            :src="item.select ? defaultTagIcon : cartCircleIcon" alt="">

        <img class="store-img" :src="item.cover_url" alt="">

        <div class="good-info">
            <div class="good-name-tag">
                <div class="good-name">{{ item.name }}</div>
                <div class="good-tag">
                    <div v-if="item.recommend" class="good-tag-li">荐</div>
                    <div v-if="item.new_store" class="good-tag-li">新</div>
                </div>
            </div>

            <div class="good-address">
                <img class="good-address-icon" :src="storeLocationIcon" alt="">
                <div class="good-address-text">
                    {{ item.region_name }}
                </div>
                <div class="good-address-distance">{{ item.distance_text }}</div>
            </div>
            <div class="good-address">
                <img class="good-address-icon" :src="storeClockIcon" alt="">
                <div class="good-address-text">
                    {{ item.business_time }}
                </div>
            </div>
            <div class="good-address">
                <img class="good-address-icon" :src="storeTpIcon" alt="">
                <div class="good-address-text">
                    {{ item.cate_name }}
                </div>

            </div>
            <!-- 补贴 -->
            <div class="good-info-subsidy" v-if="item.labels.length>0">
                <!--  :style="{background:items.bg_color,color:items.color}" v-for="items,indexs in item.labels" :key="indexs" -->
                <!-- <div class="good-info-subsidy-btn">
					<img src="../../../images/huaduo.png" alt="">666</div>
                    <div class="good-info-subsidy-btn">
                        <img src="../../../images/huaduo.png" alt="">666</div>
                        <div class="good-info-subsidy-btn">
                           666</div> -->
                <div class="good-info-subsidy-btn" 
                :style="{background:items.icon_type==3?'url(' + require('../../../images/bg_butie.png') + ') no-repeat center':items.bg_color,backgroundSize:'cover',textIndent:items.icon_type==3?'0.3rem':'0.1rem',color:items.color}" 
                v-for="items,indexs in item.labels" :key="indexs">
				<img v-if="items.icon_type!=0 && items.icon_type!=3" :src="items.icon_type==1?require('../../../images/xiaofei.png'):items.icon_type==2?require('../../../images/huaduo.png'):''" alt="">{{ items.name }}</div>
            </div>

            <div class="line-grad">
                <div v-if="item.public_status == 1" class="tag-li">
                    <div class="tag-li-label">抵</div>
                    <div class="tag-li-val">支持花朵抵扣</div>
                </div>
                <div v-if="item.gift" class="tag-li">
                    <div class="tag-li-label">送</div>
                    <div class="tag-li-val">{{ item.gift }}</div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import {
    storeLocationIcon, storeClockIcon, storeTpIcon,
    cartCircleIcon, defaultTagIcon
} from '@/tool/static-img';
export default {
    props: {
        item: {
            type: Object,
            default: {}
        },
        isDel: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            storeLocationIcon, storeClockIcon, storeTpIcon,
            cartCircleIcon, defaultTagIcon
        }
    },
    methods: {
        handleToStore() {
            this.$emit('storeInfo', this.item.id);
        },
        handleToItem() {
            this.$emit('selectItem')
        }
    }

}

</script>
<style lang="scss">
.store-good-item-wrap {
    display: flex;
    width: 7.02rem;
    margin: auto;
    margin-bottom: 0.16rem;
    padding: 0.24rem 0.24rem 0.2rem 0.2rem;
    background: #ffffff;
    border-radius: 0.16rem;
    box-sizing: border-box;

    &.del {
        transform: translateX(0.6rem);
    }

    .circle-icon {
        position: absolute;
        left: -0.84rem;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 0.36rem;
        height: 0.36rem;
        padding: 0.24rem;
    }

    .store-img {
        flex-shrink: 0;
        width: 1.76rem;
        height: 1.76rem;
        margin-right: 0.2rem;
        border-radius: 0.16rem;
    }

    .good-info {
        flex-shrink: 0;
        width: 4.58rem;

        .good-name-tag {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 0.4rem;
            padding-left: 0.04rem;
            margin-bottom: 0.12rem;

            .good-name {
                padding-right: 0.3rem;
                font-size: 0.28rem;
                font-weight: 500;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
            }

            .good-tag {
                display: flex;
                align-items: center;

                .good-tag-li {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 0.4rem;
                    height: 0.32rem;
                    margin-right: 0.12rem;
                    font-size: 0.2rem;
                    color: #F32A23;
                    border-radius: 0.04rem;
                    background: rgba(243, 42, 35, 0.1);

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }

    .good-address {
        position: relative;
        display: flex;
        align-items: center;
        height: 0.36rem;
        margin-top: 0.06rem;

        .good-address-icon {
            width: 0.32rem;
            height: 0.32rem;
            margin-right: 0.12rem;
        }

        .good-address-text {
            width: 3rem;
            font-size: 0.24rem;
            font-weight: 400;
            color: #666666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
        }

        .good-address-distance {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 0.36rem;
            line-height: 0.36rem;
            font-weight: 400;
            font-size: 0.24rem;
            color: #666666;
        }
    }

    .line-grad {
        width: 100%;
        margin-top: 0.08rem;
        border-top: 1px solid #F2F4F5;

        .tag-li {
            display: flex;
            align-items: center;
            height: 0.32rem;
            margin-top: 0.1rem;

            .tag-li-label {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 0.4rem;
                height: 0.32rem;
                margin-right: 0.12rem;
                font-size: 0.2rem;
                border-radius: 0.06rem;
                color: #F32A23;
                background: rgba(243, 42, 35, 0.1);
            }

            .tag-li-val {
                font-weight: 400;
                font-size: 0.24rem;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
            }
        }
    }

    .good-info-subsidy {
        // display: flex;
        // height: 2.36rem;
        margin-top: 0.08rem;
        margin-bottom: 0.16rem;
        display: inline-block;
        .good-info-subsidy-btn {
            min-width: 2rem;
            background: url("../../../images/bg_butie.png") no-repeat center;
            background-color: rgb(204, 233, 76);
            background-size: cover;
            display: flex;
            align-items: center;
            height: 0.36rem;
            font-weight: 400;
            font-size: 0.2rem;
            color: #fff;
            border-radius: 0.06rem;
            box-sizing: border-box;
            margin-top: .1rem;
            img{
                    width: .32rem;
					height: .32rem;
            }
        }
    }
}
</style>